<script setup lang="ts">
import '@/styles/tailwind.css'
import { articleList, hotArticleList } from "@/api/article/index"
import { onMounted } from "vue";
import Card from '../index.vue'
const props = defineProps({
    title: {
        type: String,
        default: '随机文章',
    },
    prefixIcon: {
        type: String,
        default: 'random_essay',
    },
    // 分类id
    categoryId: {
        type: String,
        default: '',
    },
    // 文章id
    articleId: {
        type: String,
        default: '',
    }
});

const randomArticles = ref([{
    id: '',
    title: '',
    thumbnail: '',
    createTime: '',
}])

function randomArticleBtn() {
    hotArticleList().then(res => {
        res.data = formatDate(res.data)
        randomArticles.value = res.data
    })
}

// 监听参数变化
// watch(() => props.articleId, () => {
//     relatedRecommendBtn(props.categoryId, props.articleId)
// })

// 相关推荐
onMounted(() => {
    if (props.title == "随机文章") {
        randomArticleBtn()
    }
    // if (props.title == "相关推荐") {
    //     relatedRecommendBtn(props.categoryId, props.articleId)
    // }
})

// 去掉时分秒
function formatDate(date: []) {
    date.forEach((item: any) => {
        item.createTime = item.createTime.split(' ')[0]
    })
    return date
}

</script>

<template>
    <!-- 随机文章 -->
    <Card :title="title" :prefix-icon="prefixIcon" :suffix-icon="title === '相关推荐' ? '' : 'rotate'" @isRotate="true"
        :isScale="true" @invoke="randomArticleBtn">
        <div class="random_container" v-for="randomArticle in randomArticles" :key="randomArticle.id">
            <div class="random_image" @click="$router.push('/article/' + randomArticle.id)">
                <img :data-src="randomArticle.thumbnail" v-lazy="true" />
            </div>
            <div class="random_text" :key="randomArticle.id">
                <div>{{ randomArticle.title }}</div>
                <div>{{ randomArticle.createTime }}</div>
            </div>
        </div>
    </Card>
</template>

<style scoped lang="scss">
.random_container {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .random_image {
        width: 130px;
        height: 70px;
        overflow: hidden;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s linear;
            object-fit: cover;

            &:hover {
                transform: scale(1.1);
            }
        }
    }

    .random_text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 30px;

        :first-child {
            margin-left: 1rem;
            font-size: 1em;
            color: $menuActiveText;
        }

        :last-child {
            margin-left: 1rem;
            font-size: 0.8em;
        }
    }
}
</style>